<?php include('../resources/includes/head_content.php'); ?>
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Roundabout Test</title>
</head>
<body>

<div id="carousel">
	<div class="slide"><img src="../images/home/announcements.png" alt="" class="" /></div>
	
	<div class="slide"><img src="../images/home/news_logo.png" alt="" class="" /></div>
	<div class="slide"><img src="../images/home/people.png" alt="" class="" /></div>
	<div class="slide"><img src="../images/home/events.png" alt="" class="" /></div>
</div>

<ul id="carousel-descriptions">
	<li class="desc current">Announcements</li>
	<li class="desc">News</li>
	<li class="desc">Kabalen</li>
	<li class="desc">Events</li>
	
</ul>

<!--<div id="carousel-controls">-->
<!--	<span class="control current">Show Me<br>Slide 1</span>-->
<!--	<span class="control">Show Me<br>Slide 2</span>-->
<!--	<span class="control">Show Me<br>Slide 3</span>-->
<!--	<span class="control">Show Me<br>Slide 4</span>-->
<!--	-->
<!--</div>-->

<script type="text/javascript">
$(document).ready(function(){
    


var $descriptions = $('#carousel-descriptions').children('li'),
	$controls = $('#carousel-controls').find('span'),
	$carousel = $('#carousel')
		.roundabout({
                    childSelector       :"div",
                    minOpacity          :0.7,
                    autoplay            :true,
                    autoplayDuration    :4000,
                    autoplayPauseOnHover:true
                    })
		.on('focus', 'div', function() {
			var slideNum = $carousel.roundabout("getChildInFocus");
			
			$descriptions.add($controls).removeClass('current');
			$($descriptions.get(slideNum)).addClass('current');
			$($controls.get(slideNum)).addClass('current');
		});

$controls.on('click dblclick', function() {
	var slideNum = -1,
		i = 0, len = $controls.length;

	for (; i<len; i++) {
		if (this === $controls.get(i)) {
			slideNum = i;
			break;
		}
	}
	
	if (slideNum >= 0) {
		$controls.removeClass('current');
		$(this).addClass('current');
		$carousel.roundabout('animateToChild', slideNum);
	}
});

});
</script>

</body>
</html>